<template>
  <!--延误保障身份证-->
  <div class="ziliao">
    <p class="tip">温馨提示：旅行开始日期从当前日期1日后开始选择，如1月1日可购买1月3日。</p>
    <wv-group>
      <wv-cell title="被保险人总数">
        <wv-number-spinner slot="ft" v-model="delayrisk.insurantNumber" :min="1" input-width="2em" @change="changed"/>
      </wv-cell>
      <wv-cell title="其中未成年人数">
        <wv-number-spinner slot="ft" v-model="delayrisk.minorNumber" :min="0" :max="delayrisk.insurantNumber" input-width="2em"/>
      </wv-cell>
    </wv-group>
    <wv-group title="旅行开始日期" v-model="delayrisk.startTime=startTime">
      <wv-cell
        title="开始时间（零时起）"
        :value="startTime"
        is-link
        @click="openPicker('startTimePicker')"
      />
      <wv-datetime-picker
        type="date"
        ref="startTimePicker"
        :startDate="nowDate"
        :endDate="maxDate"
        v-model="startTimeDate"
        @confirm="onConfirm"
      />
    </wv-group>
    <wv-group title="旅行结束日期" v-model="delayrisk.endTime=endTime">
      <wv-cell
        title="结束时间（二十四时止）"
        :value="endTime"
        is-link
        @click="openPicker('endTimePicker')"
      />
      <wv-datetime-picker
        type="date"
        ref="endTimePicker"
        :startDate="maxDate"
        :endDate="maxDate"
        v-model="maxDate"
        @confirm="onConfirm"
      />
    </wv-group>

    <wv-group title="联系电话">
      <wv-input placeholder="请输入您的联系电话" type="number" :maxlength="11" v-model="delayrisk.phone"></wv-input>
    </wv-group>
    <p class="msg" v-show="delayrisk.insurantNumber>0">被保险人信息</p>
    <div class="person" v-for="i in delayrisk.insurantNumber">
      <p>被保险人{{i}}</p>
      <wv-group title="姓名">
        <wv-input placeholder="请输入真实姓名" v-model="insurantData[i-1].userName"></wv-input>
      </wv-group>
      <wv-group title="证件类型" v-model="insurantData[i-1].identityType">
        <wv-cell
          title="证件类型"
          is-link
          :value="insurantData[i-1].identityTypeDesc"
          @click.native="insurantIdentityTypePickerShow = true,getInsurantIndex(i-1)"
        />
        <wv-picker
          :visible.sync="insurantIdentityTypePickerShow"
          :columns="identityTypeColumns"
          value-key="identityTypeDesc"
          @confirm="confirmInsurantIdentityType"
        />
      </wv-group>
      <wv-group title="证件号">
        <wv-input placeholder="请输入身份证号" type="number" v-if="insurantData[i-1].identityType==1" v-model="insurantData[i-1].identityNo"></wv-input>
        <wv-input placeholder="请输入证件号" type="number" v-if="insurantData[i-1].identityType!=1" v-model="insurantData[i-1].identityNo"></wv-input>
      </wv-group>
      <div v-show="insurantData[i-1].identityType==2">
        <wv-group title="出生日期" v-model="insurantData[i-1].birthDate">
          <wv-cell
            title="出生日期"
            :value="insurantData[i-1].birthDate"
            is-link
            @click="getBirthIndex(i-1),openBirthPicker('datePicker')"
          />
          <wv-datetime-picker
            type="date"
            ref="datePicker"
            v-model="birthTimeDate"
            @confirm="onConfirmBirth"
          />
        </wv-group>

        <wv-group title="性别" v-model="insurantData[i-1].sex">
          <wv-cell
            title="性别"
            is-link
            :value="insurantData[i-1].sexDesc"
            @click.native="sexPickerShow = true,getSexIndex(i-1)"
          />
          <wv-picker
            :visible.sync="sexPickerShow"
            :columns="sexColumns"
            value-key="sexDesc"
            @confirm="confirmSex"
          />
        </wv-group>

      </div>
    </div>

    <p class="offer" @click="goSubmit(delayrisk,insurantData)">确定</p>
  </div>
</template>
<script type="text/ecmascript-6">
  import {getGoodDetail} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'

  export default {
    name: 'baozhangdetail',
    props: {},
    data() {
      return {
        goods: {},
        delayrisk: {},
        nowDate: new Date(new Date().setDate(new Date().getDate() + 2)),
        maxDate: new Date(),
        startTimeDate: new Date(new Date().setDate(new Date().getDate() + 2)),
        endTimeDate: new Date(),
        birthTimeDate: new Date(),
        insurantIndex: '',
        insurantIdentityTypePickerShow: false,
        insurantData: [],
        birthIndex: '',
        identityType: [{identityTypeDesc: '身份证', identityType: 1}],
        identityTypeColumns: [
          {
            values: [
              {identityTypeDesc: '身份证', identityType: 1},
              {identityTypeDesc: '护照', identityType: 2},
              {identityTypeDesc: '港澳通行证', identityType: 3},
              {identityTypeDesc: '台胞证', identityType: 4}
            ],
            defaultIndex: 0
          }
        ],
        sexIndex: '',
        sexPickerShow: false,
        sex: [{sexDesc: '女', sex: 1}],
        sexColumns: [
          {
            values: [
              {sexDesc: '女', sex: 1},
              {sexDesc: '男', sex: 2}
            ]
          }
        ]
      };
    },
    methods: {
      changed(num) {
        let length = this.insurantData.length;
        if (num > length) {
          let insurant = {userName: '', identityType: 1, identityTypeDesc: '身份证', identityNo: '', birthDate: this.birthDate, sex: '', sexDesc: '',isApply:1,isCheck:1};
          this.insurantData.push(insurant);
        }
        if (num < length) {
          this.insurantData.splice(length - 1, 1);
        }
        this.delayrisk.insurantNumber = num;
      },
      getInsurantIndex(insurantIndex) {
        this.insurantIndex = insurantIndex;
      },
      getBirthIndex(birthIndex) {
        this.birthIndex = birthIndex;
      },
      getSexIndex(sexIndex) {
        this.sexIndex = sexIndex;
      },
      goSubmit(delayrisk, insurantData) {
        let msg = this.checkFrom(delayrisk, insurantData);
        console.log(msg);
        if (!msg.result) {
          Toast.text(msg.info);
          return;
        }
        let delayriskInfo = JSON.stringify(delayrisk);
        console.log(delayriskInfo);
        let insurantDataInfo = JSON.stringify(insurantData);
        let goodsId = this.$route.query.goodsId;
        this.$router.push({path: '/tijiaobaozhang', query: {delayriskInfo: delayriskInfo, insurantDataInfo: insurantDataInfo,goodsId:goodsId}})
      },
      openPicker(ref) {
        this.$refs[ref].open()
      },
      openBirthPicker(ref) {
        this.$refs[ref][this.birthIndex].open()
      },
      confirmInsurantIdentityType(picker) {
        let result = picker.getValues()[0];
        let index = this.insurantIndex;
        this.insurantData[index].identityType = result.identityType;
        this.insurantData[index].identityTypeDesc = result.identityTypeDesc;
      },
      confirmSex(picker) {
        let result = picker.getValues()[0];
        let sexIndex = this.sexIndex;
        this.insurantData[sexIndex].sex = result.sex;
        this.insurantData[sexIndex].sexDesc = result.sexDesc;
      },
      onConfirm(value) {
        let message = '';
        if (value !== null && typeof value === 'object') {
          let year = value.getFullYear();
          let month = value.getMonth() + 1;
          let date = value.getDate();
          if(month<10){
            month="0"+month;
          }
          if(date<10){
            date="0"+date;
          }
          message = `${year}-${month}-${date}`
        } else {
          message = value
        }


      },
      onConfirmBirth(value) {
        let message = '';
        if (value !== null && typeof value === 'object') {
          let year = value.getFullYear();
          let month = value.getMonth() + 1;
          let date = value.getDate();
          message = `${year}-${month}-${date}`
        } else {
          message = value
        }
        this.insurantData[this.birthIndex].birthDate = message;
      },
      getGoodsDetail() {
        let goodsId = this.$route.query.goodsId;
        getGoodDetail({goodsId: goodsId}).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.goods = res.object.goods;
            this.maxDate = this.$myUtils.computedMaxDate(this.startTimeDate, this.goods.maxTime);
          }
        })
      },
      checkFrom: function (delayrisk, insurantData) {
        let utils = this.$myUtils;
        let msg = {};
        if (utils.isNumber(delayrisk.flightNumber)) {
          msg['result'] = false;
          msg['info'] = '航班号格式不正确';
          return msg;
        }
        if (!utils.checkMobile(delayrisk.phone)) {
          console.log(delayrisk);
          msg['result'] = false;
          msg['info'] = '请输入正确的手机号';
          return msg;
        }
        if (this.startTime > this.endTime) {
          msg['result'] = false;
          msg['info'] = '结束时间不能小于开始时间';
          return msg;
        }
        if (utils.isNumber(delayrisk.originatingPlace)) {
          msg['result'] = false;
          msg['info'] = '始发地不正确';
          return msg;
        }
        if (utils.isNumber(delayrisk.destinationPlace)) {
          msg['result'] = false;
          msg['info'] = '到达地不正确';
          return msg;
        }
        let mobile = delayrisk.phone;
        if (utils.isNull(mobile)) {
          msg['result'] = false;
          msg['info'] = '请输入联系手机号';
          return msg;
        }
        if (!utils.checkMobile(mobile)) {
          msg['result'] = false;
          msg['info'] = '请输入国内手机号';
          return msg;
        }
        let length = insurantData.length;
        if (length > 0) {
          for (let insurantkey in insurantData) {
            let insurant = insurantData[insurantkey];
            console.log(insurant);
            let userName = insurant.userName;
            if (utils.isNull(userName)) {
              msg['result'] = false;
              msg['info'] = '请输入第' + (insurantkey + 1) + '位被保险人姓名';
              return msg;
            }
            if (!utils.checkUserName(userName)) {
              msg['result'] = false;
              msg['info'] = '请输入第' + (insurantkey + 1) + '位真实有效姓名';
              return msg;
            }
            if (utils.isNull(insurant.identityType)) {
              msg['result'] = false;
              msg['info'] = '请选择第' + (insurantkey + 1) + '位被保险人证件类型';
              return msg;
            }
            if (insurant.identityType == 2) {
              if (utils.isNull(insurant.sex)) {
                msg['result'] = false;
                msg['info'] = '请选择第' + (insurantkey + 1) + '位被保险人性别';
                return msg;
              }
            }
            if (utils.isNull(insurant.identityNo)) {
              msg['result'] = false;
              msg['info'] = '请输入第' + (insurantkey + 1) + '位被保险人证件号';
              return msg;
            }
            if (insurant.identityType == 1) {
              if (!utils.isCardNo(insurant.identityNo)) {
                msg['result'] = false;
                msg['info'] = '请输入第' + (insurantkey + 1) + '位被保险人合法的身份证号码';
                return msg;
              }
            }

          }
        }
        msg['result'] = true;
        msg['info'] = '校验成功';
        return msg;
      },
    },
    created() {
      this.delayrisk.minorNumber = 0;
      this.insurantData[0] = this.identityType[0];
      this.getGoodsDetail()
    },
    computed: {
      startTime: {
        get: function () {
          let value = this.startTimeDate;
          let message = '';
          if (value !== null && typeof value === 'object') {
            let year = value.getFullYear();
            let month = value.getMonth() + 1;
            let date = value.getDate();
            if(month<10){
              month="0"+month;
            }
            if(date<10){
              date="0"+date;
            }
            message = `${year}-${month}-${date}`;
          } else {
            message = value;
          }
          return message;
        },
        set: function (newValue) {
          return newValue;
        }
      },
      endTime: {
        get: function () {
          let value = this.maxDate;
          let message = '';
          if (value !== null && typeof value === 'object') {
            let year = value.getFullYear();
            let month = value.getMonth() + 1;
            let date = value.getDate();
            message = `${year}-${month}-${date}`;
          } else {
            message = value;
          }
          return message;
        },
        set: function (newValue) {
          return newValue;
        }
      },
      birthDate: {
        get: function () {
          let value = this.birthTimeDate;
          let message = '';
          if (value !== null && typeof value === 'object') {
            let year = value.getFullYear();
            let month = value.getMonth() + 1;
            let date = value.getDate();
            message = `${year}-${month}-${date}`;
          } else {
            message = value;
          }
          return message;
        },
        set: function (newValue) {
          return newValue;
        }
      }
    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .ziliao {
    padding-bottom: 50px;
  }

  .tip, .msg {
    font-size: 13px;
    color: #999;
    padding: 10px;
    text-align: left;
  }

  .msg {
    font-size: 20px;
    font-weight: 700;
    color: #111;
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
    z-index: 999;
  }

</style>
